/**
 * @file select
 * @author liaoxuezhi@baidu.com
 *
 * https://github.com/JedWatson/react-select
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import validationErrors from '../validation-messages';
import * as cx from 'classnames';
import * as assign from 'object-assign';
import 'moment/locale/zh-cn';

// @require 'react-datetime/css/react-datetime.css';
// jest 不能支持这种写法
// import 'react-datetime/css/react-datetime.css';

import ReactDateTimePicker from '../../../widgets/date/date';
import * as moment from 'moment';
import {Enhance as FormItem} from '../form-item';
import {filter, filterDate} from '../../util';

const DefaultProps = {
  date: {
    placeholder: '请选择日期',
    inputFormat: 'LL'
  },

  datetime: {
    placeholder: '请选择日期以及时间',
    inputFormat: 'LLL',
    timeFormat: '时间：HH:mm'
  },

  time: {
    placeholder: '请选择时间',
    inputFormat: 'HH:mm'
  }
};



@FormItem({
  type: 'date',
  test: (path, config) => /(?:^|\/)form-item$/.test(path) && ~['date', 'datetime', 'time'].indexOf(config.type),
  filter: config => assign({
    validationErrors
  }, DefaultProps[config.type || 'date'], config),
  validateSchema: 'http://amis.baidu.com/schemas/form.json#/definitions/formItem'
})
export default class DateField extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    formMode: PropTypes.string,
    formHorizontal: PropTypes.object
  };

  static defaultProps = {
    format: 'X'
  };

  constructor(props) {
    super(props);
    this.changeValue = this.changeValue.bind(this);

    this.state = {
      value: filterDate(props.formItemValue, props.data, props.format),
      minDate: filterDate(props.minDate, props.data, props.format),
      maxDate: filterDate(props.maxDate, props.data, props.format),
      minTime: filterDate(props.minTime, props.data, props.format),
      maxTime: filterDate(props.maxTime, props.data, props.format)
    };
  }

  componentDidMount() {
    this.syncValue();
  }

  componentWillReceiveProps(nextProps) {
    const props = this.props;

    if (props.data !== nextProps.data || props.formItemValue !== nextProps.formItemValue) {
      this.setState({
        value: filterDate(nextProps.formItemValue, nextProps.data, nextProps.format),
        minDate: filterDate(nextProps.minDate, nextProps.data, nextProps.format),
        maxDate: filterDate(nextProps.maxDate, nextProps.data, nextProps.format),
        minTime: filterDate(nextProps.minTime, nextProps.data, nextProps.format),
        maxTime: filterDate(nextProps.maxTime, nextProps.data, nextProps.format)
      });
    }
  }

  componentDidUpdate() {
    this.syncValue();
  }

  syncValue() {
    if (!this.state.value || !this.state.value.format) {
      return;
    }

    const value = this.state.value.format(this.props.format);
    if (this.props.formItemValue !== value) {
      this.props.setDefaultValue(this.props.name, value);
      this.props.setValue(value);
    }
  }

  changeValue(newValue) {
    this.props.setValue(newValue);
  }

  render() {
    let {
      format,
      inputFormat,
      placeholder,
      type,
      disabled,
      timeFormat,
      inputClassName,
      timeConstraints,
      width,
      height,
      style
    } = this.props;

    const {
      value,
      minDate,
      maxDate,
      minTime,
      maxTime
    } = this.state;

    if (width || height) {
      style = assign({}, style, {
        width,
        height
      });
    }

    return (
      <div
        className={cx('input-date', inputClassName)}
      >
        <ReactDateTimePicker
          value={value}
          onChange={this.changeValue}
          minDate={minDate}
          maxDate={maxDate}
          minTime={minTime}
          maxTime={maxTime}
          format={format}
          inputFormat={inputFormat}
          mode={type}
          style={style}
          disabled={disabled}
          timeFormat={timeFormat}
          timeConstraints={timeConstraints}
          inputProps={{
            placeholder
          }}
        />
      </div>
    );
  }
}


